You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
1.6 KiB
53 lines
1.6 KiB
<template>
|
|
<!-- Banner -->
|
|
<Banner :data="form" />
|
|
|
|
<div v-if="form" class="flex flex-col w-full md:w-screen-xl m-auto my-3">
|
|
|
|
<Breadcrumb :data="layout" title="文章详情" />
|
|
|
|
<div class="m-3 bg-white p-3 mt-4 flex flex-col gap-xl rounded-lg">
|
|
<div class="article-title-box p-4">
|
|
<div class="sm:text-3xl text-xl sm:text-left text-center">{{ form.title }}</div>
|
|
<div class="text-sm pt-2 text-gray-4 flex gap-xl sm:text-left sm:justify-start justify-center">
|
|
<span>{{ form.createTime }}</span>
|
|
<span>浏览：{{ form.actualViews }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="content leading-8 sm:text-xl px-3 pb-5 text-gray-700" v-html="form.content"></div>
|
|
</div>
|
|
</div>
|
|
<div v-if="!form">
|
|
<el-empty description="404 页面不存在"></el-empty>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import type {ApiResult} from "~/api";
|
|
import {useServerRequest} from "~/composables/useServerRequest";
|
|
import type {Article} from "~/api/cms/article/model";
|
|
import Breadcrumb from "~/components/Breadcrumb.vue";
|
|
import {getIdByParam} from "~/utils/common";
|
|
|
|
const route = useRoute();
|
|
|
|
|
|
// 页面信息
|
|
const form = ref<Article | any>();
|
|
const layout = ref<any>({});
|
|
|
|
// 请求数据
|
|
const { data: info } = await useServerRequest<ApiResult<Article>>('/cms/article/' + getIdByParam())
|
|
form.value = info.value?.data;
|
|
form.value.num = 1;
|
|
form.value.radio = '0'
|
|
|
|
layout.value.parentName = form.value?.categoryName;
|
|
layout.value.categoryName = form.value?.categoryName;
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content *{
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|